<template>
    <div>
        <ul>
            <li v-for="msg in msgList" :key="msg.id">
                <!-- query字符串写法 -->
                <!-- <router-link :to="`/home/message/detail?id=${msg.id}&title=${msg.title}`">{{ msg.title }}</router-link> -->
                <!-- query对象写法 -->
                <!-- <router-link 
                    :to="{
                        path:'/home/message/detail',
                        query:{
                            id:msg.id,
                            // title:msg.title
                        }
                    }">
                    {{ msg.title }}
                </router-link> -->

                <!-- params字符串写法 -->
                <!-- <router-link :to="`/home/message/detail/${msg.id}/${msg.title}`">{{ msg.title }}</router-link> -->
                <!-- params对象写法 -->
                <router-link 
                    :to="{
                        name:'detail',
                        params:{
                            id:msg.id,
                            // title:msg.title
                        }
                    }">
                    {{ msg.title }}
                </router-link>

                <!-- 新增按钮跳转 -->
                <button @click="push(msg)">push方法</button>
                <button @click="replace(msg)">replace方法</button>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
    
</template>

<script>
export default {
    name:'Message',
    data(){
        return{
            msgList:[
                {id:'001',title:'消息001'},
                {id:'002',title:'消息002'},
                {id:'003',title:'消息003'},
            ]
        }
    },
    mounted(){
        console.log('message被挂载');
    },
    beforeDestroy(){
        console.log('message即将被销毁');
    },
    methods:{
        push(msg){
            this.$router.push({
                name:'detail',
                params:{
                    id:msg.id,
                    // title:msg.title
                }
            })
            
        },
        replace(msg){
            this.$router.replace({
                name:'detail',
                params:{
                    id:msg.id,
                    // title:msg.title
                }
            })
        }
    }
}
</script>